<template>
  <div>
    <div class="page-header">
      <div class="box">
        <el-row class="left">
          <el-row class="title">
            <span></span>
            {{type===0?'查看报备详情':'修改报备信息'}}
          </el-row>
        </el-row>
        <el-row class="right">
          <el-button type="primary" class="tlwok-btn" @click="reloadPage">
            <span class="el-icon-refresh el-icon--left"></span>刷新
          </el-button>
          <el-button type="danger" class="tlwok-btn" @click="closePage">
            <span class="el-icon-close el-icon--left"></span>关闭
          </el-button>
        </el-row>
      </div>
    </div>
    <div class="page-content">
      <div class="info-box">
        <el-steps :active="stepActive" finish-status="success" align-center v-if="type===0">
          <el-step
            v-for="step in stepList"
            :key="step.code"
            icon="el-icon-time"
            :title="step.desc"
            :description="descTime(step.code,basicInfo.status)"
          ></el-step>
        </el-steps>
        <el-row
          class="warning-text"
          v-if="type===1"
        >温馨提示：只能修改已报备商品的“数量”，如涉及其他信息修改，请选择再次报备。</el-row>
      </div>
      <div class="table-box">
        <div class="table-title">
          <el-row class="left">
            <span class="title">报备编号：{{basicInfo.filingNumber}}</span>
            <span class="warning-text">
              <i class="el-icon-warning"></i>
              报备状态：{{basicInfo.status | statusFilterC1}}
            </span>
          </el-row>
          <el-button
            class="filing-button"
            type="primary"
            v-if="fromOSS"
            @click="exportExcel"
          >Excel导出</el-button>
        </div>
        <div class="info-item base-info">
          <div class="thead">
            <el-row>
              <i class="el-icon-s-management el-icon--left"></i> 报备基础信息
            </el-row>
          </div>
          <div class="tbody">
            <div class="content">
              <div class="line-item">
                <el-row>
                  <span class="required-icon">*</span>
                  报备人姓名：{{basicInfo.registrarName}}
                </el-row>
                <el-row>
                  <span class="required-icon">*</span>
                  项目名称：{{basicInfo.purchasePlatformName}}
                </el-row>
              </div>
              <div class="line-item">
                <el-row>
                  <span class="required-icon">*</span>
                  报备人电话：{{basicInfo.registrarPhone}}
                </el-row>
                <el-row>
                  <span class="required-icon">*</span>
                  项目报备时间：{{basicInfo.registrarStartTime | dateFilterToDay}} 至 {{basicInfo.registrarEndTime | dateFilterToDay}}
                </el-row>
              </div>
              <div class="line-item">
                <el-row>
                  <span class="required-icon">*</span>
                  采购单位（全称）：{{basicInfo.purchaseCompany}}
                </el-row>
                <el-row>
                  <span class="required-icon">*</span>
                  收货人：{{basicInfo.consigneeName}}
                </el-row>
              </div>
              <div class="line-item">
                <el-row>
                  <span class="required-icon">*</span>
                  收货地址：{{basicInfo.deliveryProvinceName}} {{basicInfo.deliveryCityName}} {{basicInfo.deliveryDistrictName}} {{basicInfo.deliveryFullAddress}}
                </el-row>
              </div>
              <div class="line-item">
                <el-row>备注：{{basicInfo.remark || '无'}}</el-row>
              </div>
            </div>
          </div>
        </div>
        <div class="info-item product-info">
          <div class="thead">
            <el-row>
              <i class="el-icon-s-management el-icon--left"></i> 报备商品信息
            </el-row>
            <el-row class="info">
              共报备
              <span class="warning-text">{{tableObj.total}}条</span>商品，挂网价合计
              <span class="warning-text">{{totalSalesPrice | priceFilter}}元</span>
            </el-row>
          </div>
          <table-list
            :hasPagination="type !== 1"
            :showEditInput="type === 1"
            :tableObj="tableObj"
            @totalFinalPrice="changeFinalPrice"
            @totalSalesPrice="changeSalesPrice"
            @tableData="changeTableData"
            @currSize="changeSize"
            @currPage="changePage"
            ref="table"
          ></table-list>
          <!-- :editFunc="editBtn" -->
        </div>
      </div>
      <div class="btn-box" v-if="type===1&&tableObj.tableData.length>0">
        <el-button type="primary" plain @click="resetTable()">重置</el-button>
        <el-button type="primary" @click="submitTable()">提交修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable eqeqeq */
import TableList from '@/components/public/TableList.vue'
export default {
  name: 'FilingDetail',
  components: { TableList },
  data () {
    return {
      type: 0, // 0:查看  1：修改
      fromOSS: false,
      tableObj: { tableData: [], isShowPages: true, total: 0 },
      // dialogFormVisible: false,
      form: {
        number: '',
        finalPrice: '',
        initialPrice: '',
      },
      formLabelWidth: '120px',
      rules: {
        number: [
          { required: true, message: '请输入数量', trigger: 'blur' },
          {
            type: 'number',
            min: 0,
            message: '请输入正确的数量',
            trigger: 'blur',
          },
        ],
        finalPrice: [
          { required: true, message: '请输入成交价', trigger: 'blur' },
          {
            type: 'number',
            min: 0,
            message: '请输入正确的成交价',
            trigger: 'blur',
          },
        ],
        initialPrice: [
          { required: true, message: '请输入挂网价', trigger: 'blur' },
          {
            type: 'number',
            min: 0,
            message: '请输入正确的挂网价',
            trigger: 'blur',
          },
        ],
      },
      id: null,
      basicInfo: {},
      stepList: [
        { code: 1, desc: '待平台审核' },
        { code: 2, desc: '待平台上架' },
        { code: 3, desc: '待采购' },
        { code: 4, desc: '采购人已下单' },
      ],
      totalFinalPrice: 0,
      totalSalesPrice: 0,
      tableData: [],
      pageSize: 10,
      startPage: 1,
    }
  },
  computed: {
    stepActive () {
      let val = 0
      if (
        !this.basicInfo.status ||
        this.basicInfo.status == 5 ||
        this.basicInfo.status == 6
      ) { val = -1 } else val = this.basicInfo.status
      return val
    },
  },
  created () {
    this.type = parseInt(this.$route.query.type) || 0
    if (this.type == 1) {
      this.tableObj.isShowPages = false
    }
    this.id = this.$route.query.id
    // if (this.$route.name.indexOf('OSS') > -1) this.fromOSS = true
  },
  methods: {
    reloadPage () {
      location.reload()
    },
    closePage () {
      if (this.type == 1) {
        let path = ''
        if (this.fromOSS) path = 'OSSFilings'
        else path = '/customer/order'
        this.$router.push({ path: path })
      } else {
        window.close()
      }
    },
    /**
     * 获取基础信息
     */
    getBasicInfo () {
      const path = this.fromOSS
        ? '/api/manage/audit/queryAuditDetail'
        : '/api/myFiling/checkFilingInfo'
      this.$axios.get(`${path}?id=${this.id}`).then(res => {
        if (res.success) {
          this.basicInfo = res.result
          this.totalFinalPrice = this.basicInfo.totalFinalPrice
          this.totalSalesPrice = this.basicInfo.totalSalesPrice
          this.tableObj.total = this.basicInfo.goodsNums
        } else this.$message.error(res.desc)
      })
    },
    /**
     * 获取商品信息
     */
    getGoodsInfo () {
      let path = ''
      if (this.fromOSS) {
        // 后台查看
        path = `/api/manage/audit/queryAuditGoodsDetail?id=${this.id}&size=${this.pageSize}&startPage=${this.startPage}`
      } else if (this.type == 1) {
        // 服务商修改
        path = `/api/myFiling/modifyFilingGoodsInfo?id=${this.id}`
      } else {
        // 服务商查看
        path = `/api/myFiling/checkFilingGoodsInfo?id=${this.id}&size=${this.pageSize}&startPage=${this.startPage}`
      }

      this.$axios.get(path).then(res => {
        if (res.success) {
          this.tableObj.tableData = res.result.filingAuditInfo.list
        } else this.$message.error(res.desc)
      })
    },
    /**
     * 监听子组件获取成交价合计
     */
    changeFinalPrice (val) {
      if (this.type == 1) this.totalFinalPrice = val
    },
    /**
     * 监听子组件获取挂网价合计
     */
    changeSalesPrice (val) {
      if (this.type == 1) this.totalSalesPrice = val
    },
    changeTableData (data) {
      this.tableData = data
    },
    /**
     * 提交报备信息修改
     */
    submitTable () {
      const _tableData = this.tableObj.tableData
      const arr = []
      this.tableData.map((item, i) => {
        if (
          !(
            parseInt(item.num) === parseInt(_tableData[i].num) &&
            parseFloat(item.salesPrice) * 1000 ==
              parseFloat(_tableData[i].salesPrice) * 10 &&
            parseFloat(item.finalPrice) * 1000 ==
              parseFloat(_tableData[i].finalPrice) * 10
          )
        ) { arr.push(i) }
      })
      if (arr.length < 1) {
        this.$message.error('还未修改任何信息')
        return
      }

      const numberReg = /^[1-9]\d*$/
      const priceReg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/

      for (let index = 0; index < this.tableData.length; index++) {
        const item = this.tableData[index]

        if (!numberReg.test(item.num + '')) {
          this.$message.error('请输入正确的商品数量')
          return
        }

        if (!priceReg.test(item.finalPrice + '')) {
          this.$message.error('请输入正确的成交价，保留两位小数')
          return
        }

        if (
          !parseFloat(item.salesPrice) ||
          !priceReg.test(item.salesPrice + '')
        ) {
          this.$message.error('请输入正确的挂网价，保留两位小数')
          return
        }
      }

      this.$axios
        .post('/api/myFiling/updateFiling', this.tableData)
        .then(res => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: '报备商品信息修改成功',
            })
          } else this.$message.error(res.desc)
        })
    },
    resetTable () {
      // this.$refs.table.resetTable()
      window.location.reload()
    },
    /**
     * 分页-改变展示条数
     */
    changeSize (v) {
      this.pageSize = v
      this.getGoodsInfo()
    },
    /**
     * 分页-翻页
     */
    changePage (v) {
      this.startPage = v
      this.getGoodsInfo()
    },
    exportExcel () {
      window.location.href =
        window.globalConfig.apiUrl +
        '/api/manage/exportFilingInfo?Token=' + '&id=' +
        this.id
    },
    /**
     * 步骤图展示
     */
    descTime (step, status) {
      if (step > status) return null
      let time = ''
      switch (parseInt(step)) {
        case 1:
          time = this.basicInfo.createTime
          break
        case 2:
          time = this.basicInfo.waitShelfTime
          break
        case 3:
          time = this.basicInfo.alreadyShelfTime
          break

        default:
          break
      }
      if (status == 4) {
        time = this.basicInfo.updateTime
      }
      return this.formatDate(time)
    },
  },
  mounted () {
    this.getBasicInfo()
    this.getGoodsInfo()
  },
}
</script>

<style lang="less" scoped>
@themeColor:#298DF8;
.page-header {
  background: #eee;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  .box {
    margin: auto;
    width: 1440px;
    height: 65px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 38px;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    span {
      width: 0;
      height: 20px;
      border: 2px solid @themeColor;
      background: @themeColor;
      margin-right: 14px;
    }
  }
}
.page-content {
  background: #fff;
  padding-top: 65px;
}
.info-box {
  margin: 30px auto;
  width: 60%;
}
.table-box,
.btn-box {
  width: 1078px;
  margin: 20px auto;
}
.table-title {
  border: 1px solid #bbb;
  padding: 0 25px;
  height: 45px;
  display: flex;
  align-items: center;
  background: #e4e4e4;
  justify-content: space-between;
  .left {
    display: flex;
  }
  .title {
    font-weight: bold;
    margin-right: 50px;
  }
}
.info-item {
  border: 1px solid #bbb;
  border-top: 0;
  .thead {
    background: #f5f5f5;
    padding: 0 25px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    .info {
      margin-right: 100px;
    }
  }
}
.base-info {
  .tbody {
    border-top: 1px solid #bbb;
    padding: 25px;
  }
  .content {
    width: 85%;
    margin: 0 auto;
  }
  .line-item {
    display: flex;
    align-items: flex-start;
    .el-row {
      flex: 1;
      margin-bottom: 12px;
      line-height: 28px;
      &:first-child {
        margin-right: 50px;
      }
    }
  }
}
.btn-box {
  text-align: right;
  .el-button {
    width: 98px;
  }
}
.dialog-form {
  .el-input {
    width: 250px;
    margin: auto;
  }
  .warning-text {
    margin-left: 10px;
    font-size: 13px;
  }
}
</style>
